import React, { Component } from 'react';
import { Card, Button, List, Form, InputNumber, Col, Row, Input, Modal } from 'antd';
import { connect } from 'dva';
import { Stage, Layer, Text, Image } from 'react-konva';
import { formatMessage } from 'umi/locale';

@connect(({ lc }) => ({ lc }))
class LineCamCalImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };

  componentDidMount() {
    const image = new window.Image();
    image.src = this.props.lc.calImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.lc.calImageSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  render() {
    return <Image image={this.state.image} width={800} height={900} />;
  }
}

@connect(({ lc, ds }) => ({ lc, ds }))
@Form.create({})
class LineCameraCalibraion extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    x1: 0,
    y1: 0,
    x2: 0,
    y2: 0,
    x3: 0,
    y3: 0,
    x4: 0,
    y4: 0,
    verifyPointX: 0, // 验证点的x坐标
    verifyPoinY: 0, // 验证点的y坐标
  };

  moveToPoint1 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/moveToPoint',
      payload: '1',
    });
  };

  moveToPoint2 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/moveToPoint',
      payload: '2',
    });
  };
  moveToPoint3 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/moveToPoint',
      payload: '3',
    });
  };
  moveToPoint4 = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/moveToPoint',
      payload: '4',
    });
  };

  verifyTransMtx = e => {
    const { dispatch } = this.props;
    const { verifyPointX, verifyPoinY } = this.state;
    dispatch({
      type: 'lc/verifyTransMtx',
      payload: [verifyPointX, verifyPoinY],
    });
  };
  clickStartDevice = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/clickStartDevice',
    });
  };

  getImageForLineCamCal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/updateLineCamCalImageSrc',
      payload: null,
    });
    dispatch({
      type: 'lc/getImageForLineCamCal',
    });
  };

  calcTransMtx = e => {
    const { dispatch } = this.props;
    const { x1, y1, x2, y2, x3, y3, x4, y4 } = this.state;
    dispatch({
      type: 'lc/clearTransMtxInfo',
    });
    dispatch({
      type: 'lc/calcTransMtx',
      payload: [x1, y1, x2, y2, x3, y3, x4, y4],
    });
  };

  calcTransMtxLeft = e => {
    const { dispatch } = this.props;
    const { x1, y1, x2, y2, x3, y3, x4, y4 } = this.state;
    dispatch({
      type: 'lc/clearTransMtxInfo',
    });
    dispatch({
      type: 'lc/calcTransMtx',
      payload: [x1, y1, x2, y2, x3, y3, x4, y4, 'left'],
    });
  };

  calcTransMtxRight = e => {
    const { dispatch } = this.props;
    const { x1, y1, x2, y2, x3, y3, x4, y4 } = this.state;
    dispatch({
      type: 'lc/clearTransMtxInfo',
    });
    dispatch({
      type: 'lc/calcTransMtx',
      payload: [x1, y1, x2, y2, x3, y3, x4, y4, 'right'],
    });
  };

  saveTransMtx = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/saveTransMtx',
    });
  };
  clickStopDevice = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/clickStopDevice',
    });
  };
  openLineCamCalImageDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/openLineCamCalImageDir',
    });
  };
  closeCamDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/closeCamDoorAlarm',
    });
  };
  openCamDoorAlarm = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'lc/openCamDoorAlarm',
    });
  };
  render() {
    const { camZmcStates, cbjZmcStates, bigCutterZmcStates } = this.props.ds;
    const {
      calImageSrc,
      startModalVisble,
      startInfo,
      calibrationError, //标定的误差信息
      calibrationMtx, // 标定的矩阵
      calibrationOffsetUsed, // 标定的时候使用的激光偏移值
      calibarionRobotUsed, // 标定时用的裁切机坐标
    } = this.props.lc;
    const { getFieldDecorator, getFieldsValue } = this.props.form;
    const {} = this.state;
    return (
      <>
        <Card>
          <Card.Grid style={{ width: '65%', textAlign: 'left' }}>
            <Stage width={800} height={900}>
              <Layer>{calImageSrc ? <LineCamCalImage width={800} /> : <Image width={800} />}</Layer>
            </Stage>
          </Card.Grid>
          <Card.Grid style={{ width: '35%', textAlign: 'left' }}>
            <Col>
              <Row>
                <span>
                {formatMessage({ id: 'app.tools.Start' })}:&nbsp;&nbsp;&nbsp;{' '}
                  {camZmcStates.rs || cbjZmcStates.rs || bigCutterZmcStates.rs ? (
                    <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.EmergencyStop' })}</font>
                  ) : camZmcStates.run && cbjZmcStates.run && bigCutterZmcStates.run ? (
                    <font style={{ color: '#00FF00', fontSize: 16 }}>{formatMessage({ id: 'app.tools.InOperation' })}</font>
                  ) : (
                    <font style={{ color: '#112233', fontSize: 16 }}>{formatMessage({ id: 'app.tools.standby' })}</font>
                  )}
                </span>
                <Button
                  onClick={this.clickStartDevice}
                  style={{ marginLeft: 10 }}
                  disabled={camZmcStates.run || cbjZmcStates.run || bigCutterZmcStates.run}
                >
                  {formatMessage({ id: 'app.tools.StartingDevice' })}
                </Button>
                <Button
                  onClick={this.clickStopDevice}
                  style={{ marginLeft: 10 }}
                  disabled={!camZmcStates.run && !cbjZmcStates.run && !bigCutterZmcStates.run}
                >
                  {formatMessage({ id: 'app.tools.StopEquipment' })}
                </Button>
                <Button
                  onClick={this.getImageForLineCamCal}
                  style={{ marginLeft: 15 }}
                  disabled={!camZmcStates.run || !cbjZmcStates.run || !bigCutterZmcStates.run}
                >
                  {formatMessage({ id: 'app.tools.GrabPicture' })}
                </Button>
                <Button
                  onClick={this.reGetImageForLineCamCal}
                  style={{ marginLeft: 15 }}
                  disabled={!camZmcStates.run || !cbjZmcStates.run || !bigCutterZmcStates.run}
                >
                  {formatMessage({ id: 'app.tools.rephotograph' })}
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button onClick={this.openLineCamCalImageDir}>{formatMessage({ id: 'app.tools.ViewCalibrationPicture' })}</Button>
                <Button onClick={this.closeCamDoorAlarm} style={{ marginLeft: 15 }}>
                {formatMessage({ id: 'app.tools.ScreenDoor' })}
                </Button>
                <Button onClick={this.openCamDoorAlarm} style={{ marginLeft: 15 }}>
                {formatMessage({ id: 'app.tools.openAlarm' })}
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <p>
                  <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.UsingPixelCoordinates' })}</font>
                </p>
                <p>
                  <span>{formatMessage({ id: 'app.tools.point1' })}:&nbsp;&nbsp;&nbsp;x1</span>
                  <Input
                    onChange={e => this.setState({ x1: e.target.value })}
                    style={{ marginLeft: 10, width: 100 }}
                  />
                  <span style={{ marginLeft: 10 }}>y1</span>
                  <Input
                    onChange={e => this.setState({ y1: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </p>
                <p>
                  <span>{formatMessage({ id: 'app.tools.point2' })}:&nbsp;&nbsp;&nbsp;x2</span>
                  <Input
                    onChange={e => this.setState({ x2: e.target.value })}
                    style={{ marginLeft: 10, width: 100 }}
                  />
                  <span style={{ marginLeft: 10 }}>y2</span>
                  <Input
                    onChange={e => this.setState({ y2: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </p>
                <p>
                  <span>{formatMessage({ id: 'app.tools.point3' })}:&nbsp;&nbsp;&nbsp;x3</span>
                  <Input
                    onChange={e => this.setState({ x3: e.target.value })}
                    style={{ marginLeft: 10, width: 100 }}
                  />
                  <span style={{ marginLeft: 10 }}>y3</span>
                  <Input
                    onChange={e => this.setState({ y3: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </p>
                <p>
                  <span>{formatMessage({ id: 'app.tools.point4' })}:&nbsp;&nbsp;&nbsp;x4</span>
                  <Input
                    onChange={e => this.setState({ x4: e.target.value })}
                    style={{ marginLeft: 10, width: 100 }}
                  />
                  <span style={{ marginLeft: 10 }}>y4</span>
                  <Input
                    onChange={e => this.setState({ y4: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </p>
              </Row>
              <Row style={{ marginTop: 10 }}>
                {/* <Button onClick={this.calcTransMtxLeft}>{formatMessage({ id: 'app.tools.CalibrationLCamera' })}</Button>
                <Button onClick={this.calcTransMtxRight}>{formatMessage({ id: 'app.tools.CalibrationRCamera' })}</Button> */}
                <Button onClick={this.calcTransMtx}>{formatMessage({ id: 'app.tools.CalibrationCamera' })}</Button>
                <Button style={{ marginLeft: 20 }} onClick={this.saveTransMtx}>
                {formatMessage({ id: 'app.tools.SaveResult' })}
                </Button>
                <p style={{ marginTop: 10 }}>
                  <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.CalibrationResult' })}</font>
                </p>
                <p>
                {formatMessage({ id: 'app.tools.error' })}:&nbsp;&nbsp;x:&nbsp;&nbsp; {calibrationError[0]} y:&nbsp;&nbsp;
                  {calibrationError[1]}
                </p>
                <p>
                {formatMessage({ id: 'app.tools.CalibrationMatrix' })}: [[{calibrationMtx[0][0]},{calibrationMtx[0][1]},{calibrationMtx[0][2]}],
                  [{calibrationMtx[1][0]},{calibrationMtx[1][1]},{calibrationMtx[1][2]}]]
                </p>
                <p>
                {formatMessage({ id: 'app.tools.LaserOffsetValue' })}:&nbsp;&nbsp;offsetX:&nbsp;&nbsp;{' '}
                  {calibrationOffsetUsed[0]} offsetY:&nbsp;&nbsp;{calibrationOffsetUsed[1]}
                </p>
              </Row>
              <Row style={{ marginTop: 10 }}>
                <p style={{ marginTop: 10 }}>
                  <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.CalVerification' })}</font>
                </p>
                <span>
                {formatMessage({ id: 'app.tools.VerificationPoint' })}:&nbsp;&nbsp;X:&nbsp;&nbsp;
                  <Input
                    onChange={e => this.setState({ verifyPointX: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </span>
                <span>
                  &nbsp;&nbsp;Y:&nbsp;&nbsp;
                  <Input
                    onChange={e => this.setState({ verifyPoinY: e.target.value })}
                    style={{ marginLeft: 10, marginRight: 10, width: 100 }}
                  />
                </span>
                <Button style={{ marginLeft: 10 }} onClick={this.verifyTransMtx}>
                {formatMessage({ id: 'app.tools.verification' })}
                </Button>
              </Row>
              <Row>
                <p style={{ marginTop: 10 }}>
                  <font style={{ color: '#FF0000', fontSize: 16 }}>{formatMessage({ id: 'app.tools.CCC' })}</font>
                </p>
                <p>
                  <span>{formatMessage({ id: 'app.tools.point1' })}:&nbsp;&nbsp;&nbsp;x1</span>
                  <span style={{ marginLeft: 10 }}>{calibarionRobotUsed[0][0]}</span>
                  <span style={{ marginLeft: 10 }}>y1</span>
                  <span style={{ marginLeft: 10 }}>{calibarionRobotUsed[0][1]}</span>
                  <Button style={{ marginLeft: 20 }} onClick={this.moveToPoint1}>
                  {formatMessage({ id: 'app.tools.GoPoint1' })}
                  </Button>
                </p>
                <p>
                  <span>{formatMessage({ id: 'app.tools.point2' })}:&nbsp;&nbsp;&nbsp;x2</span>
                  <span style={{ marginLeft: 10 }}>{calibarionRobotUsed[1][0]}</span>
                  <span style={{ marginLeft: 10 }}>y2</span>
                  <span style={{ marginLeft: 10 }}>{calibarionRobotUsed[1][1]}</span>
                  <Button style={{ marginLeft: 20 }} onClick={this.moveToPoint2}>
                  {formatMessage({ id: 'app.tools.GoPoint2' })}
                  </Button>
                </p>
                <p>
                  <span>{formatMessage({ id: 'app.tools.point3' })}:&nbsp;&nbsp;&nbsp;x3</span>
                  <span style={{ marginLeft: 10 }}>{calibarionRobotUsed[2][0]}</span>
                  <span style={{ marginLeft: 10 }}>y3</span>
                  <span style={{ marginLeft: 10 }}>{calibarionRobotUsed[2][1]}</span>
                  <Button style={{ marginLeft: 20 }} onClick={this.moveToPoint3}>
                  {formatMessage({ id: 'app.tools.GoPoint3' })}
                  </Button>
                </p>
                <p>
                  <span>{formatMessage({ id: 'app.tools.point4' })}:&nbsp;&nbsp;&nbsp;x4</span>
                  <span style={{ marginLeft: 10 }}>{calibarionRobotUsed[3][0]}</span>
                  <span style={{ marginLeft: 10 }}>y4</span>
                  <span style={{ marginLeft: 10 }}>{calibarionRobotUsed[3][1]}</span>
                  <Button style={{ marginLeft: 20 }} onClick={this.moveToPoint4}>
                  {formatMessage({ id: 'app.tools.GoPoint4' })}
                  </Button>
                </p>
              </Row>
            </Col>
          </Card.Grid>
        </Card>
        <Modal
          title={formatMessage({ id: 'app.tools.StartupPromptBox' })}
          visible={startModalVisble}
          width={window.screen.availWidth - 700}
          closable={false}
          footer={[
            <Button type="primary" onClick={this.closeStartModal}>
              {formatMessage({ id: 'app.tools.ClosePromptBox' })}
            </Button>,
            <Button
              style={{ marginLeft: 8 }}
              onClick={this.clickStopDevice}
              disabled={!cbjZmcStates.run && !camZmcStates.run && !bigCutterZmcStates.run}
            >
              {formatMessage({ id: 'app.tools.stop' })}
            </Button>,

            <Button
              style={{ marginLeft: 8 }}
              onClick={this.clickResetDevice}
              disabled={cbjZmcStates.run || camZmcStates.run || bigCutterZmcStates.run}
            >
              {formatMessage({ id: 'app.tools.TotalReset' })}
            </Button>,
          ]}
        >
          <p>{startInfo}</p>
        </Modal>
      </>
    );
  }
}
export default LineCameraCalibraion;
